<template>
  <view class="group">
    <block v-for="(item, index) in goods" :key="index">
        <!-- <navigator hover-class='none' url='/pages/goods/goods-detail/index?id={{item.id}}'> -->
      <view class="item" :data-id="item.id" @tap="goDetail">
          <view class="titleM">
              <image src="../../static/images/44.png"></image>
              <text>{{item.discountInfo.disName}}</text>
          </view>
          <view style="height:44rpx"></view>
          <view class="pro_name margin-tb-sm font30 text-center bold ellipsisN overflow-1">{{item.name}}</view>
          <view class="pro_img">
              <image lazy-load lazy-load-margin="0.5" mode="widthFix" :src="item.picUrls[0] || '../../public/img/no_pic.png'"></image>
              <!-- <view class="smallImg">
                  <image mode="heightFix" src="{{item.picUrls[0] || '../../public/img/no_pic.png'}}" />
                  <image class="label" mode="heightFix" src="../../grid/images/33.png" />
              </view> -->
          </view>
          <view class="por_price flex justify-between ">
              <view class="flex margin-left-sm">
                  <view class="font20 text-bold text-black" style="line-height:1.3">
                      <view class="text-right margin-top-sm">￥</view>
                      <view class="text-xs">抢购价</view>
                  </view>
                  <view class="pri_num margin-left-xs">{{item.discountSalePrice}}</view>
              </view>
              <view class="flex text-center margin-right-sm" :data-id="item.id" @tap.stop="addShopCart">
                  <text >立即购买</text>
              </view>
          </view>
          <image class="backImg" mode="widthFix" src="../../static/images/66.png"></image>
      </view>
        <!-- </navigator> -->
    </block>
  </view>
</template>

<script>

export default {
  data() {
    return {};
  },

  components: {},
  props: {
    goods: {
      type: Array
    }
  },
  methods: {
    goDetail(e) {
      let {
        id
      } = e.currentTarget.dataset;
      uni.navigateTo({
        url: `/pages/goods/goods-detail/index?id=${id}`
      });
    },

    addShopCart(e) {
      // console.log(e)
      let {
        id
      } = e.currentTarget.dataset;
      this.$emit('onAdd', {
        detail: {
          id: id
        }
      });
    }

  }
};
</script>
<style>

.group {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.item {
    width: 336rpx;
    height: 422rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    border: 4rpx solid rgba(252, 118, 39, 1);
    margin-bottom: 40rpx;
    position: relative;
    /* border-image: linear-gradient(315deg, rgba(252, 118, 39, 0), rgba(252, 118, 39, 1), rgba(252, 118, 39, 0)) 4 4; */
}
.group::after{
    content: '';
    display: inline-block;
    width: 336rpx;
}
.item .titleM {
    position: relative;
}

.item .titleM image {
    width: 294rpx;
    height: 64rpx;
    position: absolute;
    left: 21rpx;
    top: -20rpx;
    z-index: 1;
}

.item .titleM text {
    display: inline-block;
    width: 100%;
    line-height: 64rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 64rpx;
    letter-spacing: 4rpx;
    position: absolute;
    top: -20rpx;
    left: 0;
    -webkit-z-index: 2;
    -moz-z-index: 2;
    -ms-z-index: 2;
    -o-z-index: 2;
    z-index: 2;
}

.item .pro_img {
    display: flex;
    position: relative;
}

.item .pro_img>image {
    margin: auto;
    max-width: 150rpx;
    max-height: 200rpx;
    position: relative;
    z-index: 3;
}
.item .pro_img .smallImg image{
    height: 80rpx;
    position: absolute;
    right: 20rpx;
    top: 30rpx;
}
.item .pro_img .smallImg .label{
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 40rpx;
    height: 40rpx;
}
.item .backImg {

    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.item .por_price {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 80rpx;
}

.item .por_price .pri_num {
    font-size: 35rpx;
    font-weight: 600;
    color: #333333;
    line-height: 94rpx;
}

.item .por_price text {
    display: inline-block;
    width: 128rpx;
    height: 48rpx;
    background: #E62222;
    box-shadow: 0px 4px 6px 0px rgba(197, 29, 29, 1);
    border-radius: 28rpx;
    margin: auto 0;
    color: #FFFDFD;
    font-size: 24rpx;
    line-height: 50rpx;
}
.pro_name{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
</style>